import React from 'react';
import { Row, Col, TreeSelect, Form, Tooltip } from 'antd';
import { TreeSelectC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../components';
import uuid from 'es6-uuid';

const { SHOW_CHILD } = TreeSelect;
class TreeSelectCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ds1: [
        {
          children: [
            {
              id: uuid(10),
              title: '1-1',
              value: '1-1',
              children: [
                { id: uuid(10), title: '1-1-1', value: '1-1-1' },
                { id: uuid(10), title: '1-1-2', value: '1-1-2' },
              ],
            },
            { id: uuid(10), title: '1-2', value: '1-2' },
            { id: uuid(10), title: '1-3', value: '1-3' },
            { id: uuid(10), title: '1-4', value: '1-4' },
            { id: uuid(10), title: '1-5', value: '1-5' },
            { id: uuid(10), title: '1-6', value: '1-6' },
          ],
          id: uuid(10),
          title: '1',
          value: '1',
        },
        {
          children: [
            { id: uuid(10), title: '2-1', value: '2-1' },
            { id: uuid(10), title: '2-2', value: '2-2' },
            { id: uuid(10), title: '2-3', value: '2-3' },
            { id: uuid(10), title: '2-4', value: '2-4' },
            { id: uuid(10), title: '2-5', value: '2-5' },
            { id: uuid(10), title: '2-6', value: '2-6' },
          ],
          id: uuid(10),
          title: '2',
          value: '2',
        },
        {
          children: [
            { id: uuid(10), title: '3-1', value: '3-1' },
            { id: uuid(10), title: '3-2', value: '3-2' },
            { id: uuid(10), title: '3-3', value: '3-3' },
            { id: uuid(10), title: '3-4', value: '3-4' },
            { id: uuid(10), title: '3-5', value: '3-5' },
            { id: uuid(10), title: '3-6', value: '3-6' },
          ],
          id: uuid(10),
          title: '3',
          value: '3',
        },
      ],
      ds2: [],
      ds3: [],
      ds4: [],
    };
    this.formRef = React.createRef();
  }

  change = () => {
    this.formRef.current.setFieldsValue({
      treeselect3: '2',
    });
  };

  change1 = () => {
    const ds = [
      {
        children: [
          { id: uuid(10), title: '4-1', value: '4-1' },
          { id: uuid(10), title: '4-2', value: '4-2' },
          { id: uuid(10), title: '4-3', value: '4-3' },
          { id: uuid(10), title: '4-4', value: '4-4' },
          { id: uuid(10), title: '4-5', value: '4-5' },
          { id: uuid(10), title: '4-6', value: '4-6' },
        ],
        id: uuid(10),
        title: '4',
        value: '4',
      },
    ];
    this.setState(
      {
        ds2: ds,
      },
      () => {
        this.formRef.current.setFieldsValue({
          treeselect8: ['4-1', '4-2'],
        });
      },
    );
  };

  onSearch = (e) => {
    setTimeout(() => {
      const ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds3: ds,
      });
    }, 500);
  };

  onSearch1 = (e) => {
    setTimeout(() => {
      const ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds4: ds,
      });
    }, 500);
  };

  render() {
    const { ds1, ds2, ds3, ds4 } = this.state;

    return (
      <Form ref={this.formRef}>
        <Row style={{ padding: '20px' }}>
          <FirstHeaderC title='树形下拉组件-单选' />
          <Col span={6}>
            <SecondHeaderC title='基本场景' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect1' // Form识别的Item ID
              dataSource={ds1}
              onChange={(e) => console.log(e)}
              allowClear={true}
              onTreeExpand={(e) => {
                console.log(111, e);
              }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='有初始化值' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect2' // Form识别的Item ID
              dataSource={ds1}
              initialValue='1-6'
              onChange={(e) => console.log(e)}
              allowClear={true}
              onDropdownVisibleChange={(e) => {
                console.log('aaa', e);
              }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='异步加载' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect3' // Form识别的Item ID
              dataSource={ds1}
              onChange={(e) => console.log(e)}
              allowClear={true}
              initialValue='1'
            />
            <PrimaryC title='点击更改' onClick={() => this.change()} />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='模拟搜索，从后端获取数据' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect4' // Form识别的Item ID
              dataSource={ds3}
              onChange={(e) => console.log(e)}
              allowClear={true}
              showSearch={true}
              onSearch={this.onSearch}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='前端自搜索' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect5' // Form识别的Item ID
              dataSource={ds1}
              onChange={(e) => console.log(e)}
              allowClear={true}
              showSearch={true}
            />
          </Col>
          <FirstHeaderC title='树形下拉组件-多选' />
          <Col span={6}>
            <SecondHeaderC title='基本场景' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect6' // Form识别的Item ID
              dataSource={ds1}
              onChange={(e) => console.log(e)}
              allowClear={true}
              isMultiple={true}
              treeCheckable={true}
              treeDefaultExpandAll={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='有初始化值' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect7' // Form识别的Item ID
              dataSource={ds1}
              onChange={(e) => console.log(e)}
              isMultiple={true}
              allowClear={true}
              treeCheckable={true}
              initialValue='1'
              treeDefaultExpandAll={true}
              maxTagPlaceholder={() => <Tooltip title={''}>aaaaaaaa</Tooltip>}
              maxTagCount={2}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='异步加载' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect8' // Form识别的Item ID
              dataSource={ds2.length > 0 ? ds2 : ds1}
              onChange={(e) => console.log(e)}
              isMultiple={true}
              allowClear={true}
              showSearch={false}
              treeCheckable={true}
              treeDefaultExpandAll={true}
              showCheckedStrategy={SHOW_CHILD}
            />
            <PrimaryC title='点击更改' onClick={this.change1} />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='模拟搜索，从后端获取数据' />
            <TreeSelectC
              form={this.formRef.current} // form对象
              title='树形下拉' // 显示名称
              dataIndex='treeselect9' // Form识别的Item ID
              dataSource={ds4}
              onChange={(e) => console.log(e)}
              isMultiple={true}
              allowClear={true}
              treeCheckable={true}
              showSearch={true}
              treeDefaultExpandAll={true}
              onSearch={this.onSearch1}
            />
          </Col>
        </Row>
      </Form>
    );
  }
}

export default TreeSelectCDemo;
